<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item style="font-weight: bolder;">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top:20px ;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="#" type="index">
        </el-table-column>
        <el-table-column label="订单编号" prop="id" width="120" sortable>
        </el-table-column>
        <el-table-column label="桌号" prop="tableNumber" width="120" sortable>
        </el-table-column>
        <el-table-column label="订单状态" width="120">
          <!-- 已支付、已取消、已完成、已评价 -->
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.state==='已付款'">{{scope.row.state}}</el-tag>
            <el-tag type="warning" v-else-if="scope.row.state==='已取消'">{{scope.row.state}}</el-tag>
            <el-tag type="primary" v-else-if="scope.row.state==='已完成'">{{scope.row.state}}</el-tag>
            <el-tag type="danger" v-else>{{scope.row.state}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="催单次数" prop="reminder" width="120" sortable>
        </el-table-column>
        <el-table-column label="金额" prop="money" width="120" sortable>
        </el-table-column>
        <el-table-column label="顾客" prop="name" width="120">
        </el-table-column>
        <el-table-column label="顾客手机" prop="phone" width="120">
        </el-table-column>
        <el-table-column label="时间" prop="createdAt" sortable width="180">
        </el-table-column>
        <el-table-column label="操作" class="scope" width="450">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-view" size="mini" @click="showEditDialog(scope.row.id)">查看订单</el-button>
            <!-- 完成按钮 -->
            <el-button type="success" icon="el-icon-success" size="mini" @click="done(scope.row)" v-if="scope.row.state==='已付款'">完成</el-button>
            <el-button type="success" icon="el-icon-success" size="mini" @click="done(scope.row)" disabled v-else>完成</el-button>
            <!-- 取消按钮 -->
            <el-button type="warning" icon="el-icon-error" size="mini" @click="cancel(scope.row)" v-if="scope.row.state==='已付款'">取消</el-button>
            <el-button type="warning" icon="el-icon-error" size="mini" @click="cancel(scope.row)" disabled v-else>取消</el-button>
            <!-- 删除按钮 【订单只有取消了，才能删除】-->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(scope.row)" v-if="scope.row.state==='已取消'"
              :disabled="isTrue">删除</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(scope.row)" disabled v-else>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block" style="margin-top: 10px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
          :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-card>
    <!-- 查看订单 -->
    <el-dialog title="订单详情" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
      <el-table :data="orderDetailData" style="width: 100%">
        <el-table-column label="#" type="index">
        </el-table-column>
        <el-table-column prop="foodName" label="菜品" width="180">
        </el-table-column>
        <el-table-column prop="orderId" label="订单ID" width="180">
        </el-table-column>
        <el-table-column prop="foodPrice" label="单价">
        </el-table-column>
        <el-table-column prop="foodNumber" label="数量">
        </el-table-column>
        <el-table-column prop="foodMoney" label="金额">
        </el-table-column>
        <el-table-column prop="updatedAt" label="时间">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import jwtDecode from 'jwt-decode'
  export default {
    data() {
      return {
        isTrue: false,
        // 订单详情数据
        orderDetailData: [],
        // 控制查看订单的对话框
        dialogVisible: false,
        // 这个用来存储订单列表的数据
        tableData: [],
        // 获取订单列表的参数
        queryInfo: {
          // 关键字
          query: '',
          // 当前的页数
          pagenum: 1,
          // 当前每页显示多少条数据
          pagesize: 5
        },
        // 订单列表总数
        total: 0
      }
    },
    created() {
      this.getOrderList()
      const tokenStr = window.sessionStorage.getItem('token')
      const decode = jwtDecode(tokenStr)
      if (decode.scope !== '超级管理员') {
        this.isTrue = true
      }
    },
    methods: {
      // 点击订单完成按钮
      async done(row) {
        const o = await this.$http.put(`/ordering/done/${row.id}`)
        if (o.status !== 200) {
          return this.$message.error('修改订单状态失败')
        }
        this.getOrderList()
        this.$message.success('修改订单状态成功')
      },
      // 点击订单取消按钮
      async cancel(row) {
        const o = await this.$http.put(`/ordering/cancel/${row.id}`)
        if (o.status !== 200) {
          return this.$message.error('取消订单失败')
        }
        this.getOrderList()
        this.$message.success('取消订单成功')
      },
      // 点击订单删除按钮
      async remove(row) {
        const o = await this.$http.put(`/ordering/remove/${row.id}`)
        if (o.status !== 200) {
          return this.$message.error('删除订单失败')
        }
        this.getOrderList()
        this.$message.success('删除订单成功')
      },
      // 点击查看订单的按钮
      async showEditDialog(id) {
        const o = await this.$http.get(`/ordering/orderDetailList/${id}`)
        if (o.status !== 200) {
          return this.$message.error('获取订单详情失败')
        }
        this.orderDetailData = o.data
        this.$message.success('获取订单详情成功')
        this.dialogVisible = true
      },
      // 获取订单列表
      async getOrderList() {
        const orderList = await this.$http.get('/ordering/orderList', {
          params: this.queryInfo
        })
        if (orderList.status !== 200) {
          return this.$message.error('获取订单列表失败')
        }
        this.tableData = orderList.data.orderList
        this.total = orderList.data.total
        // this.$message.success('获取订单列表成功')
      },
      // 监听改变每页显示多少条数据
      handleSizeChange(newSize) {
        this.queryInfo.pagesize = newSize
        this.getOrderList()
      },
      // 监听改变当前页码
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage
        this.getOrderList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
